<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>notify-rule-add</title>
   
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/jbox.jsp"%>
    <%@ include file="../include/form.jsp"%>
    <link href="${pageContext.request.contextPath}/style/default/form/ui.tabs.css" type="text/css" rel="stylesheet" media="print, projection, screen"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/form/ui.tabs.js"></script>
	 <link rel="stylesheet" media="all" type="text/css" href="${pageContext.request.contextPath}/style/default/tree/zTreeStyle.css" />
	<style type="text/css">
		.ztree {border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
	</style>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/tree/jquery.ztree.all-3.1.min.js"></script>
	 
	<script src="${pageContext.request.contextPath}/js/crontab/Simple_util.js"></script>
    <script src="${pageContext.request.contextPath}/js/TimeUnit/TimeUnit.js"></script>
    <script src="${pageContext.request.contextPath}/js/TimeUnit/TimeUnit_data_zh_CN.js"></script>
	
	<script type="text/javascript">
		var stu;
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			} else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				} else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function add(){
			//判断是否选择了资源
			if('${resId}' == ''){
				getTopWin(window).getMessageBox().alert("请先在左侧树选择资源","提示");
				return false;
			}
			var level = new Array();
			var j = 0;
			for(i = 1;i <= 5; i++){
				var str=document.getElementById("eventLevels"+i);
				if(str.checked == true){
					 level[j++] = str.value;
				}
			}
				var duration = stu.results()
				//校验-事件级别
				if(level.length == 0){
					window.setTimeout(function () { $.jBox.tip('事件级别不能为空', 'success'); }, 100);
					return false;
				}	
			//提交
			 $.ajax({
				   type: "POST", 
				   url: "${pageContext.request.contextPath}/notify/notify-rule!save.action?eventLevel="+level+"&duration="+duration, //请求的action
				   data: $("#myform").serialize(), //传的参数
				   dataType: 'json',
				   success: function(data){ //结果
				   		$("#id").val(data.notifyRuleId);
				   		window.setTimeout(function () { $.jBox.tip('基本信息保存成功,可进行下一步的操作', 'success'); }, 100);
				   }
			});
		  }
		  $(function(){
			  var windowHeight = getWindowHeight()-84;
			  $("iframe").css("height",windowHeight+'px');
			  
			  $("#views").html('');
			 
			  $('#container-1').fadeIn("fast"); 
				$('#container-1 ul').tabs({
					
			  });
			  $.formValidator.initConfig({formid:"myform"
		          ,onerror:function(msg){}
		          ,onsuccess:function(){
		        	  		add();
		          			return false;
		          }
		      });
			  //$(":checkbox[name='eventLevels']").formValidator({tipid:"eventLevelsTip",onshow:" ",onfocus:"至少选择1个",oncorrect:" "}).inputValidator({min:1,onerror:"你选的个数不对"});
			  $("#name").formValidator({onshow:"请输入字符串 长度(1-128) 不能重复",onfocus:"请输入字符串  长度(1-128) 不能重复",oncorrect:"输入正确"}).inputValidator({min:1,onerror:"不能为空"})
			  .functionValidator({
				    fun:function(val,elem){
				    	    if(val.replace(/[^\x00-\xff]/g, "xx").length > 128){
				    	        return "长度超出最大范围";
				    	    }
				    	    return true;
					}
		  	  }).ajaxValidator({
					type : "post",
					async : false,
					url:'${pageContext.request.contextPath}/notify/notify-rule!checkName.action',
					data: "resId="+$("#resId").val()+"&name="+encodeURI(encodeURI($("#name").val())),
					datatype : "json",
					success : function(data){
						if(data== true)
						{
							return true;
						}else
						{
							return false;
						}
		   			},
				buttons: $("#button"),
				error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
				onerror : "已经存在",
				onwait : "正在校验"
				});
		  });
		  function closewin(){
			  window.history.back();
		  }
		  function pageReset(){
			  $("#myform").get()[0].reset(); 
			}
		  function showEventTypeTree(){
			  	var url ="iframe:notify/notify-rule!eventType.action?notifyRuleId="+$("#id").val()+"&eventType="+$("#eventTypeId").val();
				var opt = { title: "自定义事件类别",width:340,height:350,buttons: {}};
				getTopWin(window).openjBox(url,opt,'add-eventtype-rule',window);
				
			}
		
			function pageReset(){
				  $("#myform").get()[0].reset(); 
				}
			 function clearEventType(){
				  $("#eventTypeId").val('');
				  $("#views").html('');
			  }
			function setEventTypeId(eventTypeId,eventTypeName){
				 $("#radios2").attr("checked","checked");
				$("#eventTypeId").val(eventTypeId);
				var array = eventTypeName.split(',');
				var str ='';
				for(var i = 0 ; i< array.length;i++){
					if(i == 10){
						str = str+'....';
					}
					str += array[i]+'</br>';
				}
				$("#views").html(str);
			}
			function show(){
				if($("#views").html() != ''){
					$("#views").css({"top":$("#show").offset().top+12+"px", "left":$("#show").offset().left+"px", "visibility":"visible"})
				}
			}
		  function closed(){
				$("#views").css({"visibility":"hidden"})
			}
		  function toNext(id){
			  if($("#id").val() == ''){
				  getTopWin(window).getMessageBox().alert("请先保存基本信息","提示");
			  }else{
				  $("#li"+id).removeClass("ui-tabs-selected").addClass("ui-tabs-unselect");
				  $("#li"+(id+1)).addClass("ui-tabs-selected");
				  $("#fragment-"+id).css({"display":"none"});
				  $("#fragment-"+(id+1)).css({"display":"block"});
			  }
		  }
		  function toBefore(id){
			  $("#li"+id).removeClass("ui-tabs-selected").addClass("ui-tabs-unselect");
			  $("#li"+(id-1)).addClass("ui-tabs-selected");
			  $("#fragment-"+id).css({"display":"none"});
			  $("#fragment-"+(id-1)).css({"display":"block"});
		  }
	</script>

  </head>
  
  <body>
  
  		<h2 class="title-h2"><span>新增事件通知</span></h2>
   		<div id="menuContent" style="display:none; position: absolute;z-index:100;">
			<ul id="treeDemo" class="ztree" style="margin-top:0; width:200px; height: 200px;"></ul>
		</div>
   		<div id="container-1" style="display:none">
			<ul>
				<li id="li1"><a href="#fragment-1"><span>基本信息</span></a></li>
				<li id="li2"><a href="#fragment-2"><span>通知接收者</span></a></li>
				<li id="li3"><a href="#fragment-3"><span>通知延迟</span></a></li>
				<li id="li4"><a href="#fragment-4"><span>通知暂停</span></a></li>
				<li id="li5"><a href="#fragment-5"><span>子资源过滤</span></a></li>
			</ul>
			<div id="fragment-1">
				<form action="" id="myform" name="myform" method="post">
				<div id="views" style="position:absolute; visibility:hidden;border:2px solid #CCC;background-color:white;">
				</div>
					<table class="table_eidt">
			  			<tr style="height:40px">
				    		<td class="td_left" width="120px">
								资源名称
				    		</td>
				    		<td class="td_right">
				    			${resName}
				    			<input type="hidden" id="resId" name="resId" value='${resId}'>
				    		</td>
			    		</tr>
			    		<tr style="height:40px"  id="durationTd">
			    			<td class="td_left">持续时间</td>
			    			<td class="tdValue">
			    				<div id="duration"></div>
			    				<script type="text/javascript">
			    					stu = new SimpleTimeUnit("duration","ddHHmm");
			    					stu.show();
			    				</script>
			    			</td>
		    			</tr>
			    		<tr style="height:40px">
				    		<td class="td_left">
								<span class="span_alert">*</span>事件级别
				    		</td>
				    		<td class="td_right" style="line-height:16px;">
				    		  <input style="float:left;" type="checkbox" name="eventLevels" id="eventLevels1"  value="2"><font 

style="line-height:20px; float:left; display:block; width:40px; height:20px;" color='#C8FF00'>轻微</font>
					          <input style="float:left;" type="checkbox" name="eventLevels" id="eventLevels2" value="3" 

checked="checked"><font style="line-height:20px; float:left; display:block; width:40px; height:20px;" color='#FFD200'>警告</font>
					          <input style="float:left;" type="checkbox" name="eventLevels" id="eventLevels3" value="4" 

checked="checked"><font style="line-height:20px; float:left; display:block; width:40px; height:20px;" color='#FF9200'>重要</font>
					          <input style="float:left;" type="checkbox" name="eventLevels" id="eventLevels4" value="5" 

checked="checked"><font style="line-height:20px; float:left; display:block; width:40px; height:20px;" color='#FF1042'>严重</font>
					          <input style="float:left;" type="checkbox" name="eventLevels" id="eventLevels5" value="1"><font 

style="line-height:20px; float:left; display:block; width:40px; height:20px;" color='black'>恢复</font>
				    		  <span id="eventLevelsTip" style="width:150px"></span>
				    		</td>
			    		</tr>
			    		<tr style="height:40px">
				    		<td class="td_left">
								<span class="span_alert">*</span>规则名称
				    		</td>
				    		<td class="td_right">
				    			<input type="text" id="name" name="name" style="width: 200px;">
				    			<span id="nameTip" style="width:150px"></span>
				    		</td>
			    		</tr>
			    		<tr style="height:40px">
				    		<td class="td_left">
								事件类别
				    		</td>
				    		<td class="td_right">
				    			<input type="radio" name="radios" id="radios1" checked="checked" onclick="clearEventType();">全部

&nbsp;&nbsp;
    							<input name="radios" id="radios2" type="radio" onclick="showEventTypeTree();"><span 

onmouseover="show();" onmouseout="closed();" id="show" onclick="showEventTypeTree();" style="color: blue;"><a>自定义</a></span>
				    			<input type="hidden" id="eventTypeId" name="eventTypeId">
				    		</td>
			    		</tr>
			  		</table>
			  		<div style="margin-left:150px; margin-top:5px;">
				    	<input type="submit" id="button" name="button" value="保存" class="btn-4">
				    	<input type="button" value="重置" class="btn-4" onclick="pageReset();">
				    	<input type="button" value="返回列表" onclick="closewin();" class="btn-4">
				    	<input type="button" value="下一步" onclick="toNext(1);" class="btn-4">
		    		</div>
		    		<input id="id" name="id" type="hidden">
				</form>
			</div>
			<div id="fragment-2">
				<iframe style="width: 100%;" src="${pageContext.request.contextPath}/jsp/notify/notify-receive-rule-common.jsp" 

frameborder="0"></iframe>
			</div>
			<div id="fragment-3">
				<iframe style="width: 100%;" src="${pageContext.request.contextPath}/jsp/notify/notify-delay-rule-common.jsp" 

frameborder="0"></iframe>
			</div>
			<div id="fragment-4">
				<iframe style="width: 100%;" src="${pageContext.request.contextPath}/jsp/notify/notify-pause-rule-common.jsp" 

frameborder="0"></iframe>
			</div>
			<div id="fragment-5">
				<iframe style="width: 100%;" src="${pageContext.request.contextPath}/jsp/notify/notify-exclude-res-common.jsp" 

frameborder="0"></iframe>
			</div>
		</div>
    </body>
</html>
